<template>
<div class="m-input-control"
    :class="{
        'm-input-control-prefix':$slots.prefix,
        'm-input-control-suffix':$slots.suffix
    }"
>
    <span class="m-input-prefix" v-if="$slots.prefix">
        <slot name="prefix"></slot>
    </span>
    <div class="m-input-container">
        <input
            class="m-input ant-input"
            :class="{'m-input-password':isPassword,'ant-input-canEdit':disabled}"
            v-model="curVal"
            :placeholder="placeholder"
            @blur="onBlur"
            @input="onChange"
            @focus="onFocus"
            v-bind="inputBind"
            :disabled="disabled"
        />
        <uv-icon v-if="curVal && allowClear && !disabled" @click="onAllowClear" class="icon-delete" name="close-circle"></uv-icon>
        <my-icon
            :type="showPassword? 'icon-yincang-off':'icon-icon-test-copy'"
            :class="[!showPassword ? 'uni-eye uni-eye-active' : 'uni-eye']"
            @click="changePassword"
            v-if="isPassword && !disabled"
        />
    </div>
    <span class="m-input-suffix" v-if="$slots.suffix">
        <slot name="suffix"></slot>
    </span>
</div>
</template>

<script>
export default {
    name: "InputControl",
    props:{
        modelValue:{},
        placeholder:{},
        isPassword:{
            default:false
        },
        allowClear:{
            default: true
        },
        disabled:{}
    },
    emits:['update:modelValue','blur','change','focus','onAllowClear'],
    data(){
        return {
            showPassword:true
        }
    },
    computed:{
        curVal:{
            get(){
                return this.modelValue ;
            },
            set(val){
                this.$emit('update:modelValue',val)
            }
        },
        inputBind(){
            let {isPassword} = this ;
            let obj = {}
            if(isPassword){
                obj.password = this.showPassword
            }
            return obj
        }
    },
    methods:{
        changePassword: function() {
            this.showPassword = !this.showPassword;
        },
        onBlur(){
            this.$emit('blur',this.curVal)
        },
        onChange(){
            this.$emit('change',this.curVal)
        },
        onFocus(){
            this.$emit('focus',this.curVal)
        },
        onAllowClear(){
            this.$emit('onAllowClear','')
        },
    }
}
</script>

<style scoped>
.icon-delete{
    position: absolute;
    right: 0.5rem;
    top: 0.6rem;
}
.m-input-control{
    position: relative;
    display: flex;
}
.m-input-container{
    flex: 1;
    font-size: 0;
    position: relative;
}
.uni-eye{
    position: absolute;
    top: 1rem;
    right: .5rem;
    transform: translateY(-50%);
}
.uni-eye.uni-eye-active{
    color: #4d9eff;
}
.m-input-password{
    padding-right: 1.6rem;
}
.m-input-suffix,
.m-input-prefix{
    display: flex;
    align-items: center;
    padding: 0 .4rem;
    background-color: rgba(0, 0, 0, 0.02);
}
:where(.m-input-control-prefix,.m-input-control-suffix) .m-input{
    border: 0;
}
.m-input-control-suffix,
.m-input-control-prefix{
    border: 1px solid #d9d9d9;
    border-radius: .3rem;
}
.m-input-prefix{
    border-right: 1px solid #d9d9d9;;
}
.m-input-suffix{
    border-left: 1px solid #d9d9d9;;
}
</style>
